import styled from "styled-components";

import border from '@a/styled/border.js'
import ellipsis from '@a/styled/ellipsis'

const ListContainer = styled.div `
  display: flex;
  flex-direction: column;
  height: 100%;
  ul {
    flex: 1;
    overflow-y:scroll;
  }
`

const SubTitle = ellipsis(styled.h2 ``)

const ListWrap = border(
  styled.li`
  display:flex;
  padding: .1rem;
  background-color: #fff;
  img {
    margin-right: .15rem;
  }
  > div:last-child {
    h1 {
      font-size: .16rem;
      line-height: .3rm;
    }
    h2 {
      font-weight: normal;
    }
    h3 {
      font-size: .12rem;
      font-weight: normal;
      line-weight: .25rem;
    }
  }
`
)

export {
  ListContainer,
  ListWrap,
  SubTitle
}